<!--
 * @Author: wjk
 * @Date: 2019-12-31 15:40:51
 * @LastEditors: xlm
 * @LastEditTime: 2021-07-22 19:26:01
 * @description: file content
 -->
<template>
  <base-page-view class-name="page-container certification-page">
    <view v-if="false" class="searchBank">
      <image src="/static/images/icon/icon_search_grey.png" class="seaechImage" />
      <input v-model="searchBank" placeholder="请输入您想要切换的银行" class="bankInput" />
      <view v-if="searchBank" class="seaechCancle" @click="seaechCancle">取消</view>
    </view>
    <view class="bankView">
      <view v-for="(bank,index) in NewItems" :key="index" class="bankList" @click="chooseIndex = index">
        {{ bank.name }}
        <view class="choose-icon">
          <image v-if="index === chooseIndex" src="/static/images/icon/icon_radio_active.png" class="seaechImage" />
          <image v-else src="/static/images/icon/icon_radio.png" class="seaechImage" />
        </view>
      </view>
      <view style="height:40rpx"></view>
    </view>
    <view class="saveReal" :class="{'saveRealUn': chooseIndex<0}" @click="chooseBank"><view class="text">保存</view></view>

  </base-page-view>
</template>

<script>
// import './index.scss'
export default {
  components: {

  },
  data() {
    return {
      bankList: [],
      searchBank: '',
      chooseIndex: -1,
      updateRealname: false
    }
  },
  computed: {
    NewItems() {
      var _this = this
      var NewItems = []
      this.bankList.map(function(item) {
        if (item.name.search(_this.searchBank) !== -1) {
          NewItems.push(item)
        }
      })
      return NewItems
    }
  },
  created() {
  },
  onLoad(options) {
    if (options.updateRealname) {
      this.updateRealname = options.updateRealname
    }
    this.getList()
  },
  onShow() {

  },
  methods: {
    async getList() {
      const bank = await this.$api.commissionApi.certificationBank()
      if (bank.code === 0) {
        this.bankList = bank.data
      }
    },
    chooseBank(bank) {
      if (this.chooseIndex < 0) return
      const realName = uni.getStorageSync('realName')
      if (realName) {
        const real = JSON.parse(realName)
        real.bank_name = this.bankList[this.chooseIndex].name
        uni.setStorageSync('realName', JSON.stringify(real))
      }
      uni.navigateBack()
    },
    seaechCancle() {
      this.searchBank = ''
    }
  }
}
</script>
<style lang="scss" scoped>
.certification-page{
    background-color: #f5f5f5;
    // padding-bottom: 120rpx;
    box-sizing: border-box;
    .head_tips{
        width: 100%;
        background-color: #F6F6F6;
        color: #E21536;
        height: 70rpx;
        line-height: 70rpx;
        text-indent: 28rpx;
    }
    .certification-content{
        .certification-title{
          font-size: 28rpx;
          padding: 32rpx;
          color: #999;
        }
        .card-box{
          background-color: #ffffff;
          padding: 0 32rpx;
        }
        .card{
            padding: 32rpx 0rpx;
            @include flex;
            align-items: center;
            border-bottom: 1px solid $color-border;
            &:nth-last-child(1) {
              border: none;
            }
            .text{
                width: 194rpx;
                font-size: 28rpx;
                color: #000;
                &.text-grey{
                  color: #999;
                }
            }
            .content_input{
                @include sub-item;
                font-size: 28rpx;
            }
            .placeholderClass{
                color: #cccccc;
                font-size: 28rpx;
            }
            .icon_my_more{
                width: 22rpx;
                height: 22rpx;
            }
            .delete{
                @include extend-click();
                width: 24rpx;
                height: 24rpx;
                padding: 0 20rpx;    
            }
        }
        .b_border{
            border-bottom: 1px solid #000000;
            border-bottom: 1px solid $color-border
        }
        .updateRealname{
           color: #999999;        
        }
        
    }
    .m_t_20{
        margin-top: 20rpx;
    }
    .prompt{
        padding: 50rpx;
        color: #666666;
        font-size: 24rpx;
        line-height: 40rpx;
        .m-b-20{
            margin-bottom: 30rpx;
        }
        .kefu{
            color: #2254F5;
            position: relative;
        }
    }
    .saveReal{
        position: fixed;
        bottom: 0rpx;
        width: 100%;
        background: white;
        color: #fff;
        box-sizing: border-box;
        line-height: 98rpx;
        text-align: center;
        font-size: 28rpx;
        background-color: #f5f5f5;
        padding: 40rpx 32rpx;
        padding-bottom: calc( 0rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc( 0rpx + env(safe-area-inset-bottom));
        .text{
          background-color: #000;
          height: 98rpx;
        }
        &.saveRealUn{
          .text{
            background-color: #ccc;
          }
        }
  }
  .saveBgR{
    background-color: #FF759F;
  }
  .saveBgF{
    background-color: #DDDDDF;
  }
  .ali-certification-content{
    background-color: #ffffff;
    padding: 0 20rpx;
    .card{
      padding: 40rpx 30rpx;
      @include flex;
      align-items: center;
      border-bottom: 1px solid #eaeaea;
      .text{
        width: 160rpx;
        font-size: 28rpx;
        color: #000;
      }
      .content_input{
        @include sub-item;
        font-size: 28rpx;
      }
      .placeholderClass{
        color: #cccccc;
        font-size: 28rpx;
      }
      .icon_my_more{
        width: 32rpx;
        height: 32rpx;
      }
      .delete{
        width: 32rpx;
        height: 32rpx;
        padding: 0 20rpx;    
      }
    }
    .b_border{
      border-bottom: 1px solid #000000;
    }
    .updateRealname{
      color: #999999;        
    }
  }
  .ali-saveReal{
    margin-top: 40rpx;
    position: relative;
    width: 95%;
    height: 80rpx;
    color: #fff;
    line-height: 80rpx;
    text-align: center;
    font-size: 28rpx;
    left: 2.5%;
    background-color: #000000;
  }
}
.searchBank{
    background-color: #ffffff;
    margin: 20rpx;
    @include flex;
    align-items: center;
    .seaechImage{
        width: 36rpx;
        height: 36rpx;
        margin: 0 10rpx;
    }
    .bankInput{
        height: 56rpx;
        line-height: 56rpx;
        font-size: 24rpx;
        @include sub-item;
    }
    .seaechCancle{
        width: 80rpx;
        height: 56rpx;
        line-height: 56rpx;
        text-align: center;
        color: #027AFF;
    }
}
.bankView{
    background-color: #fff;
    padding-bottom: 178rpx;
    .bankList{
      font-size: 28rpx;
      margin: 0 32rpx;
      height: 40rpx;
      border-bottom: 1px solid #eaeaea;
      line-height: 40rpx;
      padding: 20rpx 0;
      position: relative;
    }
    .choose-icon{
      position: absolute;
      right: 32rpx;
      top: 22rpx;
      image{
        width: 36rpx;
        height: 36rpx;
      }
    }
}
.realSuccessPage{
    box-sizing: border-box;
    padding-top: 40rpx;
    background-color: #fff;
    .realSuccessBox{
      margin-top: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .text{
        font-size: 36rpx;
        font-weight: 500;
        margin: 44rpx 0 88rpx 0;
        
      }
      .theme-button{
        color: white;
        background-color: #000;
        width: 686rpx;
        height: 98rpx;
        line-height: 98rpx;
        text-align: center;
        font-size: 32rpx;
      }
    }
    .realSuccess{
        width: 130rpx;
        height: 130rpx;
        margin: 0 auto 40rpx;
        display: block;
    }
    .title{
        width: 100%;
        text-align: center;
        font-size: 36rpx;
        color: #000000;
        font-weight: 500;
    }
    .content{
        margin: 85rpx 30rpx 36rpx;
        padding: 56rpx 40rpx;
        background-color: #F5F5F5;
        color: #333333;
        .content_info{
            display: flex;
            flex-direction: row;
            margin-bottom: 50rpx;
            .info_left{
                width: 146rpx;
            }
            .info_right{
                @include sub-item;
                @include text-ellipsis;
            }
        }
    }
    .tips_box{
        margin-left: 52rpx;
        font-size: 26rpx;
        color: #666666;
        .tips{
            margin-bottom: 20rpx;
        }
    }
    .updateCard{
        position: fixed;
        bottom: 40rpx;
        bottom: calc( 40rpx + constant(safe-area-inset-bottom));
        bottom: calc( 40rpx + env(safe-area-inset-bottom));
        width: 95%;
        height: 98rpx;
        color: #fff;
        // box-shadow:0rpx 12rpx 16rpx 0rpx rgba(153,174,223,0.2);
        // border-radius:88rpx;
        line-height: 98rpx;
        text-align: center;
        font-size: 28rpx;
        left: 2.5%;
        background-color: #000000;
    }
    .kefu{
        color: #2254F5;
        position: relative;
    }
}
.phoneMsgDialog{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  z-index: 2;
  align-items: center;
  background-color: rgba(0,0,0,0.6);
  justify-content: center;
  .content{
    margin-top: -200rpx;
    box-sizing: border-box;
    background-color: #fff;
    padding: 32rpx;
    width: 750rpx;
    height: 470rpx;
    position: relative;
    .close{
      right: 32rpx;
      top: 32rpx;
      width: 28rpx;
      height: 28rpx;
      position: absolute;
    }
    .title{
      font-weight: bold;
      font-size: 34rpx;
      color: #333;
    }
    .subTitle{
      margin-top: 16rpx;
      color: #999;
      font-size: 28rpx;
    }
    .varifyCodeBox{
      display: flex;
      align-items: center;
      margin-top: 68rpx;
      justify-content: space-between;
      .sendMsg{
        width: 176rpx;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 24rpc;
        color: white;
        background-color: #000;
        text-align: center;
        &.disable{
          background-color: #ccc;
        }
      }
      .varifyCode{
        font-size: 28rpx;
        padding-left: 32rpx;
        width: 486rpx;
        height: 80rpx;
        border: 2rpx solid $color-border;
      }
    }
    .closeButton{
      width: 686rpx;
      height: 98rpx;
      line-height: 98rpx;
      font-size: 32rpc;
      margin-top: 48rpx;
      color: white;
      background-color: #000;
      text-align: center;
    }
  }

}
</style>